<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>下拉菜单</title>
    <style type="text/css">
    *{
		margin:0;
		padding:0;
		list-style:none;
			
	}
    .nav{
		position:absolute;
        float:right;
        line-height:30px;
		height:30px;
		right:0;
      }
	.navList{
		display: inline-block;
		margin: 0 0 0 16px;
		padding: 0 10px;
		height: 30px;
	}
	.listStyle{
		background:#3385ff;        
	}
	.lastStyle{
		color:#ffffff;
		text-decoration:none;
	}
	.subnav{
		width:75px;
        background:#ffffff;
		position:relative;
		right:-486px;
		top:-30px;
    }
		
    </style>
</head>
<body>
<div id= "app">
    <div style="width:100%;height: 50px;">
		<div class="nav" >
		   <div class="navList" v-for="(list,index) in lists" @mouseenter="mouseover(index)" :class="{'listStyle':index==7}" >
				<a href="https://www.baidu.com" style="font-size:14px" :class="{'lastStyle':index==7}">{{ list.message }}</a>
		   </div>
			 <div class="subnav" v-show="seen" @mouseleave="mouseout">
			  <li v-for="subnav in sublists"  style="text-align:center">
				<div>
					<img :src ='subnav.imgUrl'><br/><br/>
					<p class="subText" style="margin-top:-30px;margin-left:0;"><a href="https://www.baidu.com">
					{{subnav.subtext}}</a></p>
				</div>
			  </li>
			 </div>
		</div>
	</div>
</div>	
	
	
	
	<script>
	var vm = new Vue({
		el:'#app',
		data:{
			lists: [
			{ message: '新闻'},
			{ message: 'hao123'},
			{ message: '地图'},
			{ message: '视频'},
			{ message: '贴吧'},
			{ message: '学术'},
			{ message: '登录'},
			{ message: '更多产品'}
			],
			sublists:[
				 { imgUrl:'',subtext: '更多产品' },
				 { imgUrl:'picture.png',subtext: '音乐' },
				 { imgUrl:'picture.png',subtext: '图片' },
				 { imgUrl:'picture.png',subtext: '文库'},
				 { imgUrl:'picture.png',subtext: '音乐' },
				 { imgUrl:'picture.png',subtext: '图片' },
				 { imgUrl:'picture.png',subtext: '文库' },
				 { imgUrl:'<br/>',subtext: '全部产品' }
			 ],
			seen:false
			
		},
		methods:{
			mouseover:function(index){
				if(index==7){
					this.seen = true
				
				} else{
					console.log(this),
					this.seen = false
					 }
				},
			mouseout:function(){
				this.seen = false
			}
		}
	})
	</script>
	

</body>
</html>
 